<template>
  <div class="card-demo">
    <h1>📘 卡片插槽使用示例</h1>

    <!-- 使用 Card 组件 -->
    <Card>
      <template #header>
        <h2>📘 学习 Vue 插槽</h2>
      </template>

      <p>这是卡片的主要内容，我可以写任意内容，比如一段介绍...</p>

      <template #footer>
        <div>
          <button @click="cancel">❌ 取消</button>
          <button @click="confirm">✅ 确认</button>
        </div>
      </template>
    </Card>
  </div>
</template>

<script setup>
import Card from '../components/Card.vue' // 引入你之前定义的 Card 组件

function cancel() {
  alert('你点击了取消')
}

function confirm() {
  alert('你点击了确认')
}
</script>

<style scoped>
.card-demo {
  padding: 20px;
}
h1 {
  margin-bottom: 20px;
}
</style>
